
        <ul class="ribbon">
            <li>
					<!-- Orb Button -->
						<!-- <<< -->
                <ul class="orb"> 
                    <li><a href="javascript:void(0);" accesskey="1" class="orbButton">&nbsp;</a><span>Menu</span>
                        <ul>
                            <li><a href="#">
                                <img src="ribbon/images/icon_save.png" alt="Save" /><span>Save</span></a> </li>
                             <!--
                            <li><a href="#">
                                <img src="ribbon/images/icon_saveas.png" alt="Save as" /><span>Save As</span></a>
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_richtext.png" alt="Rich Text" /><span>Rich Text document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_ooxml.png" alt="OOXML" /><span>Office Open XML document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_ooxml.png" alt="Open Document" /><span>OpenDocument text</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_plaintext.png" alt="Plain text" /><span>Plain text document</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_otherformats.png" alt="Other formats" /><span>Other formats</span></a>
                                    </li>
                                </ul>
                            </li>
                            -->
                            <li><a href="#">
                                <img src="ribbon/images/icon_print.png" alt="Print" /><span>Print</span></a>
                            <!--
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_print.png" alt="Print" /><span>Print</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_quickprint.png" alt="Quick print" /><span>Quick print</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_printpreview.png" alt="Print preview" /><span>Print preview</span></a>
                                    </li>
                                </ul>
                            -->
                            </li>

                            <li><a href="#">
                                <img src="ribbon/images/icon_sendemail.png" alt="Send in e-mail" /><span>Send in e-mail</span></a>
                                <ul>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_sendemail.png" alt="Send via Outlook" /><span>Send via Outlook</span></a>
                                    </li>
                                    <li><a href="#">
                                        <img src="ribbon/images/icon_sendemail.png" alt="Server Send mail" /><span>SMPT Service</span></a>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#">
                                <img src="ribbon/images/icon_about.png" alt="About" /><span>About</span></a>
                            </li>
                            <li><a href="#">
                                <img src="ribbon/images/icon_exit.png" alt="Exit" /><span>Exit</span></a> </li>
                        </ul>
                    </li>
                </ul>
							<!-- >>> -->
            </li>
            <li>
                <ul class="menu">
               	  <!-- View tab -->
							<!-- <<< -->
                    <li><a href="#view" accesskey="3">VIEW</a>
                        <ul>
                            <li>
                                <h2>
                                    Zoom</h2>
                                <div>
                                    <img id="ribbon_view_zoom_in" src="ribbon/images/icon_zoomin.png" alt="Zoom in" />
                                    Zoom in
                                </div>
                                <div>
                                    <img id="ribbon_view_zoom_out" src="ribbon/images/icon_zoomout.png" alt="Zoom out" />
                                    Zoom out
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                       <span>Fit to screen</span>
                                    </div>
                                    <div>
                                       <span>Fit to width</span>
                                    </div>
                                    <div>
                                       <span>Fit to height</span>
                                    </div>
                                </div>
                            </li>
                            <li>
                              <h2>Navigate</h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/navigate_beginning16.gif" alt="Go to the first page"/>First Page
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_fastleft16.gif" alt="Go to the previour block of pages"/>Previous Page Block
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_left16.gif" alt="Block left"/>Previous Page 
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/navigate_end16.gif" alt="Go to the last page"/>Last Page
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_fastright16.gif" alt="Go to the next block of pages"/>Next Page Block
                                 </div>
                                 <div>
                                    <img src="ribbon/images/navigate_right16.gif" alt="Go to the next page"/>Next Page 
                                 </div>
                              </div>
                            </li>
                            <li>
                              <h2>Rotate</h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/rotate90_16.gif" alt="Rotate clockwise"/>Clockwise 
                                 </div>
                                 <div>
                                    <img src="ribbon/images/rotate270_16.gif" alt="Rotate counterclockwise"/>Counterclockwise
                                 </div>
                                 <div>
                                    <img src="ribbon/images/rotate180_16.gif" alt="Rotate the page 180 degrees"/>Up side down 
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li> 
							<!-- >>> -->

						  <!-- Edit Tab -->
							<!-- <<< -->
                    <li><a href="#edit" accesskey="2">EDIT</a>
                        <ul>
                            <li>
                              <h2><span>Clipboard</span></h2>
                              <div>
                                 <img src="ribbon/images/icon_paste.png" alt="Clipboard"/>Copy
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/select.gif" alt="Select"/>Select Image
                                 </div>
                                 <div>
                                    <img src="ribbon/images/select_text.gif" alt="Select"/>Select Text
                                 </div>
                              </div>
                            </li>
                            <li>
                                <h2><span>Search</span></h2>
                                <div class="ribbon-list">
                                    <div>
                                       <img src="ribbon/images/search16.gif" alt="Search" />Search
                                    </div>
                                    <div>
                                       <img src="ribbon/images/search_attributes16.gif" alt="Search Attributes" />Attribute search
                                    </div>
                                </div>
                            </li>
                            <li>
                              <h2><span>Notes & Annotation</span></h2>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_users16.gif" alt="Select Users" />Select Annotation<ul>
														<% for(var i=0; i<users.length; i++) {%>
														<li><%= users[i] %></li>
														<% } %>
													 </ul>
                                 </div>
                                 <div>
                                    <img src="ribbon/images/note_new16.gif" alt="Search Attributes" />Add&nbsp;note</div>
                                 <div>
                                    <img src="ribbon/images/print16.gif" alt="Print Notes" />Print notes 
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li>
							<!-- >>> -->

						  <!-- Window -->
							<!-- <<< -->
                    <li><a href="#display" accesskey="2">WINDOW</a>
                        <ul>
                            <li>
                                <h2>
                                    Show or hide</h2>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox1" />
                                        <label accesskey="t" for="chkbox1">
                                            Thumbnails</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox2" />
                                        <label accesskey="n" for="chkbox2">
                                            Notes</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox3" />
                                        <label accesskey="a" for="chkbox3">
                                            Annotation</label>
                                    </div>
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox4" />
                                        <label accesskey="t" for="chkbox4">
                                            Form</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox5" />
                                        <label accesskey="n" for="chkbox5">
                                            Reverse Sides</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox6" />
                                        <label accesskey="a" for="chkbox6">
                                            Cover Sheet</label>
                                    </div>
                                </div>
                                <div class="ribbon-list">
                                    <div>
                                        <input type="checkbox" id="chkbox7" />
                                        <label accesskey="t" for="chkbox7">
                                            Signature</label>
                                    </div>
                                    <div>
                                        <input type="checkbox" id="chkbox8" />
                                        <label accesskey="n" for="chkbox8">
                                            Smooth Image</label>
                                    </div>
                                </div>
                            </li>
									<li>
										<h2>Leave</h2>
										<div>
                                	 <img src="ribbon/images/icon_exit.png" alt="Exit" /><span>Exit</span>
										</div>
									</li>
								</ul>
							</li>

							<!-- >>> -->

                    <!-- Annotation tab -->
							<!-- <<< -->

                    <li><a href="#annotation" accesskey="3">ANNOTATE</a>
                        <ul>
                            <li>
                              <div>
                                 <img src="ribbon/images/icon_save.png" alt=""/>Save
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_ellipse16.png"/>Elipse
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_arrow16.png"/>Arrow
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_freehand16.png"/>Freehand</span>
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_checkmark16.png"/>Checkmark
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_line16.png"/>Line
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_highlight16.png"/>Highlight</span>
                                 </div>
                              </div>
                              <div class="ribbon-list">
                                 <div>
                                    <img src="ribbon/images/annotation_text16.png"/>Text
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotation_stamp16.png"/>Stamp&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
												<ul>
													<% for(var i=0; i<stamps.length; i++) {%>
													<li><%= stamps[i] %></li>
													<% } %>
												</ul>
                                 </div>
                                 <div>
                                    <img src="ribbon/images/annotations_list16.gif"/>List of annotation
                                 </div>
                              </div>
                            </li>
                        </ul>
                    </li>
							<!-- >>> -->
                </ul>
            </li>
        </ul>
